<template>
  <view class="container">
    <view class="container_title">
      <text class="container_title_text">可提现金额</text>
      <h1>¥<text>{{amount}}</text></h1>
    </view>

    <view class="container_hint">
      <image src="/static/activeicon.png" mode="aspectFill"></image>
      <text>满足50元即可提现，一个工作日内到！</text>
    </view>

    <view class="container_money">
      <h1>提现金额</h1>
      <van-field label="¥" type="number" custom-style="font-size: 36rpx;color: rgba(61, 61, 61, 1);margin-top:10rpx;"
        placeholder-style="font-size: 36rpx;color: rgba(61, 61, 61, 0.5);" :value="moneyValue" placeholder="请输入提现金额"
        @blur="onmoneyInput">
        <text slot="button" class="field_text" @click="moneyValue = amount">全部提现</text>
      </van-field>
      <view class="container_money_bank">
        <view class="container_money_bank_left">
          提现至
        </view>
        <view class="container_money_bank_right" @click="navTo('/subpkg/choosebank/choosebank')">
          <image :src="bank.previewImage" mode="aspectFill"></image>
          <text>{{bank.bankType?bank.bankType:'请选择银行卡'}}</text>
          <view style="padding: 12rpx 0 0;">
            <van-icon name="arrow" />
          </view>
        </view>
      </view>
    </view>

    <view class="container_btn">
      <button :class="buttonShow?'button_box2':'button_box1'" :disabled="buttonShow" @click="apply">申请提现</button>
      <text @click="navTo('/subpkg/withdraw_record/withdraw_record')">查看提现记录</text>
    </view>

  </view>
</template>

<script>
  import {
    addApply
  } from "@/api/attestation.js"

  export default {
    data() {
      return {
        moneyValue: '',
        buttonShow: true,
        bank: [],
        amount: '',
      };
    },
    onLoad(option) {
      this.amount = option.amount
    },
    onShow() {
      this.bank = wx.getStorageSync('bank')
      this.verify()
    },
    // onHide() {
    //   // 
    // },
    methods: {
      onmoneyInput(e) {
        console.log(e)
        let value = parseFloat(e.detail.value)
        if (!value) {
          // 如果转化之后的结果为 NaN，则给定默认值为 1
          this.moneyValue = '';
        } else {
          this.moneyValue = e.detail.value.trim()
        }
        this.verify()
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      verify() {
        if (this.moneyValue && this.bank.bankType) {
          this.buttonShow = false
        } else {
          this.buttonShow = true
        }
      },
      apply() {
        var body = {
          amount: this.moneyValue,
          bankType: this.bank.bankType
        }
        addApply(body).then(res => {
          console.log(res)
        }).catch(res => {
          this.$util.Tips({
            title: res
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  .container {
    padding: 50rpx 30rpx;

    .container_title {
      .container_title_text {
        color: rgba(61, 61, 61, 0.6);
        font-size: 28rpx;
      }

      h1 {
        color: rgba(61, 61, 61, 1);
        font-size: 36rpx;
        margin-top: 10rpx;

        text {
          font-size: 56rpx;
          font-weight: bold;
          margin-left: 15rpx;
        }
      }
    }

    .container_hint {
      display: flex;
      align-items: center;
      margin: 35rpx 0 50rpx;

      image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 10rpx;
      }

      text {
        color: rgba(61, 61, 61, 1);
        font-size: 24rpx;
      }
    }

    .container_money {
      // width: 690rpx;
      // height: 312rpx;
      background-color: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 20rpx 3rpx rgba(0, 0, 0, 0.04);
      border-radius: 10rpx;
      padding: 30rpx 44rpx;
      box-sizing: border-box;
      overflow: hidden;

      /deep/ .van-cell {
        padding: 45rpx 0 !important;
      }

      /deep/ .van-cell__title {
        max-width: 50rpx !important;
        min-width: 50rpx !important;
        font-size: 48rpx;
      }

      h1 {
        color: rgba(61, 61, 61, 1);
        font-size: 28rpx;
      }

      .field_text {
        color: rgba(61, 61, 61, 0.8);
        font-size: 30rpx;
      }

      .container_money_bank {
        color: rgba(61, 61, 61, 1);
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0 0;

        .container_money_bank_right {
          display: flex;
          align-items: center;

          image {
            width: 30rpx;
            height: 30rpx;
          }

          text {
            margin: 0 12rpx;
          }
        }
      }
    }

    .container_btn {
      margin-top: 70rpx;

      text {
        display: flex;
        justify-content: center;
        margin-top: 20rpx;
        font-size: 28rpx;
        color: rgba(61, 61, 61, .5);
      }

      // width: 690px;
      button {
        height: 97rpx;
        border-radius: 226rpx;
        font-size: 36rpx;
        line-height: 93rpx;
      }

      .button_box1 {
        background-color: rgba(253, 211, 56, 1);
        color: rgba(61, 61, 61, 1);
      }

      .button_box2 {
        background-color: rgba(253, 211, 56, 0.5);
        color: rgba(61, 61, 61, 0.5);
      }
    }
  }
</style>
